<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<u-swiper :list="bannerImage" height="380" :title="true" name='vod_pic_slide' indicator-pos="bottomRight" @listClick="listClick" style="width: 94%;margin: auto; margin-top: 8rpx;"></u-swiper>
			
			<view v-if="tabtype==0"> 
				<empty-view slot="empty"></empty-view>
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="content-list" v-if="item.tuijian">
						<view>
						<u-section style="margin-top: 40rpx; margin-bottom: 20rpx; margin-left: 8rpx;" :title="item.des"  :right="false" :fontSize = "34" :show-line="false"></u-section>
						<u-grid-double :videolist = "item.tuijian" v-if="item.type_id==0" @videoTap="itemClick"></u-grid-double>
						<u-grid-first-three :videolist="item.tuijian" :item_first="item.first_item" @videoTap="itemClick" v-else></u-grid-first-three>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="type_list">
				<empty-view slot="empty"></empty-view>
				<u-section style="margin-top: 40rpx; margin-bottom: 20rpx; margin-left: 8rpx;" :title="tuijian_title"  :right="false" :fontSize = "34" :show-line="false" v-if="tuijian.length>0"></u-section>
				<view class="item1" v-for="(item,index) in tuijian" :key="index">
					<view class="Imagebox">
						<image class="Image" 
						:src="item.vod_pic"
						mode="aspectFill"
						></image>
					
						<view class="topvip" v-if="item.videotype===1">
							<text class="top-text">VIP</text>
						</view>
						
						<view class="bottom">
							<text class="bottom-text">{{item.vod_remarks}}</text>
						</view>
					</view>
					<view class="videotitle">
						<view class="title">
							<text class="title-text">{{item.vod_name}}</text>
						</view>
						
						<view class="desc">
							<view class="desc-item">
								<text class="desc-text jishu">{{item.vod_blurb}}</text>
							</view>
						</view>
					</view> 
				</view>
				<view class="bto" style="width: 100%;display: flex;" v-if="tuijian.length>0">
					<view class="more" @click="search_ku()"><u-icon name="eye"></u-icon>更多精彩</view>
					<view class="change" @click="change_tujian()"><u-icon name="reload"></u-icon>换一批</view>
				</view>
				
				<u-section style="margin-top: 40rpx; margin-bottom: 20rpx; margin-left: 8rpx;" :title="area_title"  :right="false" :fontSize = "34" :show-line="false"></u-section>
				<view class="item1" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
					<view class="Imagebox">
						<image class="Image" 
						:src="item.vod_pic"
						mode="aspectFill"
						></image>
					
						<view class="topvip" v-if="item.videotype===1">
							<text class="top-text">VIP</text>
						</view>
						
						<view class="bottom">
							<text class="bottom-text">{{item.vod_remarks}}</text>
						</view>
					</view>
					<view class="videotitle">
						<view class="title">
							<text class="title-text">{{item.vod_name}}</text>
						</view>
						
						<view class="desc">
							<view class="desc-item">
								<text class="desc-text jishu">{{item.vod_blurb}}</text>
							</view>
						</view>
					</view> 
				</view>
			</view>
			
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				title:'wewe',
				dataList: [],
				firstLoaded: false,
				tuijian_title:"",
				area_title:"",
				banner:[],
				pgt:1,
				bannerImage:[
					// {
					// 	vod_pic_slide: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/0c0e09eb1d86dd20b62069804004e7a9_1920x550.jpg',
					// 	vod_name: '昨夜星辰昨夜风，画楼西畔桂堂东'
					// }
				],
				tuijian:[],
				// list: [
				// 	{
				// 		image: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/0c0e09eb1d86dd20b62069804004e7a9_1920x550.jpg',
				// 		title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// 	},
				// 	{
				// 		image: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/99dd722be09aa2f375deb81a4af759e4_1920x550.jpg',
				// 		title: '身无彩凤双飞翼，心有灵犀一点通'
				// 	},
				// 	{
				// 		image: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/5d1576d655e63f06c0313db526b077c4_1920x550.jpg',
				// 		title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// 	}
				// ],
				// item_first:{
				// 	videotype:1,
				// 	vod_remarks:"更新至20210912期",
				// 	vod_blurb:'身无彩凤双飞翼',
				// 	vod_pic: "http://yingshi-stream.2345cdn.net/dypcimg/index/upload/0c0e09eb1d86dd20b62069804004e7a9_1920x550.jpg",
				// 	vod_name: '身无彩凤双飞翼，心有灵犀一点通'
				// },
				videolist: [
					{	
						videotype:1,
						vod_remarks:"更新至20210912期",
						vod_blurb:'昨夜星辰昨夜风',
						vod_pic: "https://img.52swat.cn/upload/vod/20210104-1/6eed135ba2e721fe6134feb96e989ae6.jpg",
						vod_name: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{	
						videotype:1,
						vod_remarks:"更新至20210912期",
						vod_blurb:'身无彩凤双飞翼',
						vod_pic: "https://img.52swat.cn/upload/vod/20200813-1/3e76a02831c77a83e16f66fe1fa4e1bd.jpg",
						vod_name: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{	
						videotype:1,
						vod_remarks:"更新至20210912期",
						vod_blurb:'谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						vod_pic: "https://img.52swat.cn/upload/vod/20210819-1/bc8972aacbac42c3eadaec3df1c5de0e.jpg",
						vod_name: '谁念西风'
					}
				]
			}
		},
		props:{
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			tabtype: {
				type: Number,
				default: 0
			},
			// bannerImage:{
			// 	type:Array,
			// 	default:[
			// 		{
			// 			vod_pic_slide: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/0c0e09eb1d86dd20b62069804004e7a9_1920x550.jpg',
			// 			title: '昨夜星辰昨夜风，画楼西畔桂堂东'
			// 		},
			// 		{
			// 			vod_pic_slide: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/99dd722be09aa2f375deb81a4af759e4_1920x550.jpg',
			// 			title: '身无彩凤双飞翼，心有灵犀一点通'
			// 		},
			// 		{
			// 			vod_pic_slide: 'http://yingshi-stream.2345cdn.net/dypcimg/index/upload/5d1576d655e63f06c0313db526b077c4_1920x550.jpg',
			// 			title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
			// 		}
			// 	]
			// },
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						//懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 5);
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pg: pageNo,
					pageNo: pageSize,
					type: this.tabIndex + 1,
					t:this.tabtype
				}
				
				console.log(this.tabtype);//当前类型type_id
				console.log(params);
				let url;
				if(this.tabtype == 0){
					url = "/api.php/provide/cate/";
					console.log('bn')
					console.log(this.bannerImage)
				}else{
					url = "/api.php/provide/vod/";
					
				}
				this.$http_request("/api.php/provide/cate_area/",{'type_id':this.tabtype}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.bannerImage = res.list['banner'];
						if(this.tabtype != 0){
							this.tuijian_title = res.list['type_title'];
							this.area_title = res.list['type_key'];
							this.tuijian = res.list['tuijian'];
						}
						console.log('banner')
						console.log(this.bannerImage)
					}
				}).catch(res => {
					
					
				})
				this.$http_request(url,params).then(res=>{
					if(res.code==1){
						if(this.tabtype==0){
							this.$refs.paging.complete(res.class);
						}else{
							this.$refs.paging.complete(res.list);
						}
						this.firstLoaded = true;
					}else{
						this.$refs.paging.complete(false);
					}
				}).catch(res => {
					
					this.$refs.paging.complete(false);
				})
				
			},
			itemClick(item) {
				uni.navigateTo({
					url:'/pages/detail/detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			listClick(item){
				console.log(213213423443243245354);
				uni.navigateTo({
					url:'/pages/detail/detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			search_ku(){
				//uni.setStorageSync('type_id', this.tabslist[current]['type_id']);
				uni.switchTab({
					url:'/pages/pianku/pianku'
				})
			},
			change_tujian(){
				const params = {
					pg: this.pgt,
					pageNo: 3,
					type: this.tabIndex + 1,
					t:this.tabtype
				}
				this.$http_request("/api.php/provide/vod/",params).then(res=>{
					if(res.code==1){
						this.tuijian = res.list;
						this.pgt = this.pgt+1;
					}
					
				}).catch(res => {
					
				})
			}
		}
	}
</script>

<style>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
	}
	
	/* .item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	} */

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
	.content-list{
		width: 96%;
		margin: auto;
	}
	
	
	.more{
		height: 60rpx;
		background-color: #eaedf1;
		width: 40%;
		margin: auto;
		margin-top: 20rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.change{
		height: 60rpx;
		background-color: #eaedf1;
		width: 40%;
		margin: auto;
		margin-top: 20rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	
	
	
	
	
	
	.type_list{
		display: flex;
		flex-wrap: wrap;
		width: 96%;
		margin: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.type_list .item1{
		position:relative;
		width: 33%;
		padding: 12rpx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	
	.type_list Imagebox .Image,image{
		height: 296rpx;
		border-radius: 8rpx;
		width: 222rpx;
		
	}
	.type_list .topvip{
		position: absolute;
		top: 12rpx;
		right: 4rpx;
	}
	.type_list .top-text,.top-text>text {
		padding: 0 8rpx;
		height: 40rpx!important;
		line-height: 40rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #2979ff;
		font-size: 28rpx!important;
		border-top-left-radius: 0;
		border-top-right-radius: 14rpx;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 14rpx;
	}
	.type_list .videotitle .desc{
		flex-wrap: nowrap!important;
		flex-direction: row!important;
		justify-content: space-between;
	}
	.type_list .videotitle,.title-text,.title,.desc{
		width: 222rpx!important;
		max-width: 222rpx!important;
	}
	
	.type_list .videotitle .desc .desc-item {
		width: 222rpx!important;
	}
	.type_list .bottom{
		position: absolute;
		bottom: 100rpx;
		right:12rpx;
		
	}
	.type_list .bottom-text,.bottom-text>text {
		padding-bottom: 10rpx;
		padding-right: 10rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.type_list text,.title-text,.desc-text,.title,.desc {
		overflow: hidden;
		word-break: break-all;
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
		lines:1;//NVUE下要用这个属性，来让文字超出隐藏变省略号
	}
	.type_list .title-text-first {font-size: 32rpx;}
	.type_list .desc-first {font-size: 24rpx;color: #747d8c;}
	.type_list .title-text {font-size: 32rpx;}
	.type_list .desc {font-size: 24rpx;color: #747d8c;}
</style>
